<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" >

<title>前端基础之CSS属性 | 迷航</title>
<meta name="description" content="人可以迷失方向，但是不能停下脚步！">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="shortcut icon" href="https://tingke.gitee.io/post/favicon.ico?v=1690805106645">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css">
<link rel="stylesheet" href="https://tingke.gitee.io/post/styles/main.css">



<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />



  </head>
  <body>
    <div id="app" class="main">

      <div class="sidebar" :class="{ 'full-height': menuVisible }">
  <div class="top-container" data-aos="fade-right">
    <div class="top-header-container">
      <a class="site-title-container" href="https://tingke.gitee.io/post">
        <img src="https://tingke.gitee.io/post/images/avatar.png?v=1690805106645" class="site-logo">
        <h1 class="site-title">迷航</h1>
      </a>
      <div class="menu-btn" @click="menuVisible = !menuVisible">
        <div class="line"></div>
      </div>
    </div>
    <div>
      
        
          <a href="/" class="site-nav">
            首页
          </a>
        
      
        
          <a href="/archives" class="site-nav">
            归档
          </a>
        
      
        
          <a href="/tags" class="site-nav">
            标签
          </a>
        
      
        
          <a href="/post/about" class="site-nav">
            关于
          </a>
        
      
    </div>
  </div>
  <div class="bottom-container" data-aos="flip-up" data-aos-offset="0">
    <div class="social-container">
      
        
      
        
      
        
      
        
      
        
      
    </div>
    <div class="site-description">
      人可以迷失方向，但是不能停下脚步！
    </div>
    <div class="site-footer">
      Powered by <a href="https://github.com/getgridea/gridea" target="_blank">Gridea</a> Copyright © 2019 | <a class="rss" href="https://tingke.gitee.io/post/atom.xml" target="_blank">RSS</a>
    </div>
  </div>
</div>


      <div class="main-container">
        <div class="content-container" data-aos="fade-up">
          <div class="post-detail">
            <h2 class="post-title">前端基础之CSS属性</h2>
            <div class="post-date">2020-07-04</div>
            
            <div class="post-content">
              <p>前面介绍了CSS的选择器，既然选择了正确的标签，我们该如何改变标签的样式呢？</p>
<h2 id="0x00-文本元素">0x00 文本元素</h2>
<p>1、属性</p>
<pre><code class="language-css">font-size: 50px;         /*文字大小*/
font-weight: 700;       /*值从100-900，文字粗细,700约等于Bold，不推荐使用font-weight:bold; */
font-family:微软雅黑;    /*文本的字体*/
font-style: normal | italic;  /*normal:默认值  italic:斜体*/
line-height: 50px;            /*行高*/
</code></pre>
<p>2、文本属性连写</p>
<pre><code class="language-css">/* 格式：font: font-style font-weight  font-size/line-height  font-family; */
font: italic 700 50px/40px  微软雅黑;
</code></pre>
<p>注意：font:后边写属性的值。一定按照书写顺序。<br>
PS：文本属性连写中文字大小和字体为必写项。</p>
<p>3、文字的表达方式</p>
<pre><code class="language-css">font-family: 微软雅黑; // 直接写中文名称
font-family: microsoft yahei; // 写字体的英文名称
font-family: \5FAE\8F6F\96C5\9ED1; // unicode 编码（解析更快）
</code></pre>

            </div>
            
            
              <div class="next-post">
                <div class="next">下一篇</div>
                <a href="https://tingke.gitee.io/post/post/3TADld0ke/">
                  <h3 class="post-title">
                    前端基础之CSS选择器
                  </h3>
                </a>
              </div>
            

            

          </div>

        </div>
      </div>
    </div>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>

<script type="application/javascript">

AOS.init();

hljs.initHighlightingOnLoad()

var app = new Vue({
  el: '#app',
  data: {
    menuVisible: false,
  },
})

</script>




  </body>
</html>
